<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>传悦首页</title>
    <link rel="stylesheet" href="index.css">
</head>

<body>
    <!-- 头部 -->
    <header>
        <div class="header-con">
            <div class="title">
                <img src="img/1/1.1.png" alt="">
                <span>网&nbsp;络&nbsp;全&nbsp;案&nbsp;营&nbsp;销&nbsp;服&nbsp;务&nbsp;提&nbsp;供&nbsp;商</span>
            </div>
            <ul class="ulList">
                <li><a href="">网站首页</a></li>
                <li><a href="">传悦资源</a></li>
                <li><a href="">传悦案例</a></li>
                <li><a href="">传悦服务</a></li>
                <li><a href="">解决案例</a></li>
                <li><a href="">需求提交</a></li>
            </ul>
            <div class="number">
                <img src="img/1/1.2.png" alt="">
            </div>
        </div>

    </header>
    <!-- 大图 -->
    <div class="picture">
        <div class="site">
            <div class="site-con"><span>网站首页</span> &gt; <span>传悦案例</span> </div>
        </div>
    </div>
    <!-- 全部 -->
    <ul class="all">
        <li>全部</li>
        <li>网站建设</li>
        <li>推广运营</li>
        <li>品牌策划</li>
        <li>网络全案</li>
    </ul>
    <!-- 小方块 -->
    <div class="box" id="dlList">
        <a href="case.html" id="template">
            <dl class="box1">
                <dt><img src="img/1/3.1.png" alt=""> </dt>
                <dd>众德集团 网站建设</dd>
                <span></span>
                <dd>网站建设 品牌形象 整合营销 引导销售</dd>
            </dl>
        </a>
    </div>
    <!-- 换页 -->
    <div class="change">
        <span><a href="">&lt;</a> </span>
        <span><a href="">1</a></span>
        <span><a href="">2</a></span>
        <span><a href="">3</a></span>
        <span><a href="">4</a></span>
        <span><a href="">&gt;</a></span>
    </div>
    <!-- 底部 -->
    <footer>
        <div class="footer-con">
            <img src="img/1/4.1.png" alt="">
        </div>

    </footer>
    <script src="jquery.min.js"></script>
    <script>
        $.ajax({
            url: "http://127.0.0.1:85/getNewsList",
            method: "GET",
            success(data) {
                // console.log(data);
                let tem = $("#template")
                let dlList = $("#dlList")
                data.forEach(item => {
                    let newItem = tem.clone(true)
                    newItem.attr("id", "")
                    newItem.find("dt img").attr("src", item.img)
                    newItem.find("span").prev().html(item.title)
                    newItem.find("span").next().html(item.content)
                    newItem.attr(`href`, `case.html?id=${item.id}`)
                    newItem.appendTo(dlList)
                })
            }
        })
    </script>
</body>

</html>